<template>
	<div class="game-container">
		<!-- 游戏头部 - 显示分数和状态 -->
		<header class="game-header">
			<div class="score-display">
				<span class="label">分数</span>
				<span class="value">{{ grade }}</span>
			</div>
			<div class="ammo-display">
				<span class="label">弹药</span>
				<span class="value">{{ clip }} / {{ maxClip }}</span>
				<button 
					class="reload-btn" 
					@click="addDanyao(false)"
					:disabled="yeasAddDanyao || clip >= maxClip"
				>
					<i class="fas fa-sync-alt"></i> 上弹
				</button>
			</div>
		</header>
		
		<!-- 游戏主区域 -->
		<div class="game-area" @click="attack">
			<!-- 怪兽活动区域 -->
			<ul class="monster-container">
				<li 
					class="monster" 
					v-for="(item, index) in monsterList" 
					:key="index"
					:style="{
						top: `${item.top}px`,
						left: `${item.left}px`,
						width: `${item.automaticWidth}px`,
						height: `${item.automaticHeight}px`,
						zIndex: item.isBoss ? 10 : 1
					}"
					:class="{ 'boss-monster': item.isBoss, 'hit-effect': item.flag }"
				>
					<div class="health-bar">
						<div 
							class="health-value" 
							:style="{ width: `${Math.max(0, item.bloodVolume / (item.isBoss ? 4500 : 500) * 100)}%` }"
							:class="item.bloodVolume < 30 ? 'critical' : ''"
						></div>
					</div>
					<image 
						:src="item.url" 
						mode="widthFix"
						class="monster-image"
						:alt="item.altText"
					></image>
					
					<!-- 击中特效 - 优化显示逻辑 -->
					<div v-if="item.flag" class="hit-effect-container">
						<image 
							:src="item.texiaoIMage" 
							mode="widthFix"
							class="hit-animation"
							alt="攻击特效"
						></image>
					</div>
				</li>
			</ul>

			<!-- 警戒线 -->
			<div class="warning-line" :style="{ top: `${xianTop}px` }">
				<div class="warning-pulse"></div>
			</div>

			<!-- 攻击效果区域 - 优化显示 -->
			<ul class="attack-effects">
				<li 
					v-for="(item, index) in attackList" 
					:key="index" 
					:style="{
						top: `${item.top}px`,
						left: `${item.left}px`,
						zIndex: item.zIndex
					}"
					class="attack-effect"
					:class="item.animationClass"
				>
					<image 
						:src="item.url" 
						mode="widthFix" 
						class="attack-image"
						:alt="item.altText"
					></image>
				</li>
			</ul>
		</div>
		
		<!-- 游戏控制区 -->
		<div class="game-controls">
			<button class="control-button fire-button" @click="attack" :disabled="clip <= 0">
				<i class="fas fa-crosshairs"></i> 射击
			</button>
			<button class="control-button reload-button" @click="addDanyao(false)" :disabled="yeasAddDanyao || clip >= maxClip">
				<i class="fas fa-box"></i> 装弹
			</button>
		</div>
		
		<!-- 游戏结束弹窗 -->
		<div class="game-over-modal" v-if="game_over">
			<div class="modal-content">
				<h2 class="modal-title">游戏结束</h2>
				<p class="final-score">最终得分: <span>{{ grade }}</span></p>
				<div class="modal-buttons">
					<button class="modal-button restart-button" @click="anew">
						<i class="fas fa-redo"></i> 重新开始
					</button>
					<button class="modal-button exit-button" @click="goBack">
						<i class="fas fa-sign-out-alt"></i> 退出
					</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				monsterList: [],

				monSterListImage: [{
						url: 'https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/3cb4c6757056489fa4f6909b7d527689.gif',
						altText: '机械虎怪物',
						bloodVolume: 100,
						movement_speed: 2,
						grade: 100,
						flag: false,
						flagTime: 0,
						id: 1,
						isBoss: false,
						texiaoIMage: 'https://picsum.photos/id/1060/200/200' // 击中特效
					},
					{
						url: 'https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/6aad3445bc5c48129c716d508abc7725.gif', // 树精（植物类图片）
						altText: '树精怪物',
						bloodVolume: 300,
						movement_speed: 1,
						grade: 100,
						flag: false,
						flagTime: 0,
						id: 3,
						isBoss: false,
						texiaoIMage: 'https://picsum.photos/id/1060/200/200' // 击中特效
					},
					{
						url: 'https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/38df16c787234f368cd11d508bcd53e3.gif', // 巨龙BOSS
						altText: '巨龙BOSS',
						bloodVolume: 5000,
						movement_speed: 1.5,
						grade: 1000,
						flag: false,
						flagTime: 0,
						id: 4,
						isBoss: true,
						texiaoIMage: 'https://picsum.photos/id/1060/300/300' // 击中特效
					},
					{
						url: 'https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/f56955d0fda74884aa69019735aa638f (1).gif', // 飞兽BOSS
						altText: '飞兽BOSS',
						bloodVolume: 4500,
						movement_speed: 4,
						grade: 1500,
						flag: false,
						flagTime: 0,
						id: 5,
						isBoss: true,
						texiaoIMage: 'https://picsum.photos/id/1060/300/300' // 击中特效
					}
				],

				// 攻击效果列表
				attackList: [],

				// 攻击方式 - 增加动画类名
				attackObjList: [{
						zIndex: 99999,
						aggressivity: 50,
						url: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/713de8babe3f4fb4bd086462f7f11631.gif", // 蓝色能量弹
						altText: '蓝色能量弹',
						texiaoIMage: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/86baef8dbff04b459a7183b33262161a.gif", // 击中特效
						flagTime: 1,
						movement_speed: 10,
						penetrate: 1,
						animationClass: 'blue-attack' // 动画类名
					},
					{
						zIndex: 99999,
						aggressivity: 90,
						url: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/b8695c26a1874b929f2ba31bb4806b60.gif", // 红色能量弹
						altText: '红色能量弹',
						texiaoIMage: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/92982d5afd054137ac3c92925fe97478.gif", // 击中特效
						flagTime: 1,
						movement_speed: 0,
						penetrate: 1,
						animationClass: 'red-attack' // 动画类名
					},
					{
						zIndex: 99999,
						aggressivity: 50,
						url: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/dd56bd2ef46e4a80aa930b150634fd00.gif", // 绿色能量弹
						altText: '绿色能量弹',
						texiaoIMage: "https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/ed9f725a888c45a394f5378429fdaf7a.gif", // 击中特效
						flagTime: 1,
						movement_speed: -1,
						penetrate: 1,
						animationClass: 'green-attack' // 动画类名
					}
				],

				windowWidth: 0,
				windowHeight: 0,
				automaticWidth: 80,
				automaticHeight: 80,
				xianTop: 550,
				game_over: false,

				// 定时器
				addMonsterListTime: null,
				monsterListTopTime: null,
				attackListTopTIme: null,
				take_a_beating_time: null,
				addDanyaoTime: null,

				grade: 0,
				addSpeed: 3000,
				clip: 60,
				maxClip: 60,
				yeasAddDanyao: false,
				isShowBoss: false
			}
		},

		beforeDestroy() {
			this.clearAllIntervals();
		},

		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			this.windowWidth = systemInfo.windowWidth;
			this.windowHeight = systemInfo.windowHeight;
			this.xianTop = this.windowHeight * 0.7;

			this.automatic_generation();
			this.examine_negative_result();
		},

		methods: {
			clearAllIntervals() {
				clearInterval(this.addMonsterListTime);
				clearInterval(this.monsterListTopTime);
				clearInterval(this.attackListTopTIme);
				clearInterval(this.take_a_beating_time);
				clearInterval(this.addDanyaoTime);
				
				this.addMonsterListTime = null;
				this.monsterListTopTime = null;
				this.attackListTopTIme = null;
				this.take_a_beating_time = null;
				this.addDanyaoTime = null;
			},

			automatic_generation() {
				this.addMonsterListTime = setInterval(() => {
					if (this.isShowBoss) return;

					let randLeft = Math.floor(Math.random() * this.windowWidth);
					let imageIndex = Math.floor(Math.random() * this.monSterListImage.length);
					const selectedMonster = this.monSterListImage[imageIndex];

					let params = {
						top: 0,
						left: randLeft <= this.automaticWidth ? 0 : randLeft - this.automaticWidth,
						automaticWidth: this.automaticWidth,
						automaticHeight: this.automaticHeight,
						...selectedMonster
					};

					if (selectedMonster.isBoss) {
						const shouldSpawnBoss = Math.floor(Math.random() * 10) === 1;
						if (!shouldSpawnBoss) {
							const normalMonster = this.monSterListImage[0];
							params = { ...params, ...normalMonster };
						} else {
							params.automaticHeight = this.automaticHeight * 2;
							params.automaticWidth = this.automaticWidth * 2;
							params.left = randLeft <= (this.automaticWidth * 2) ? 0 : randLeft - (this.automaticWidth * 2);
							this.isShowBoss = true;
						}
					}

					this.monsterList.push(params);
					this.adjustDifficulty();
				}, this.addSpeed);

				this.monsterListTopTime = setInterval(() => {
					this.monsterList.forEach((item, index) => {
						item.top += item.movement_speed;
						
						if ((item.top + item.automaticHeight) >= this.xianTop) {
							this.game_over = true;
							this.clearAllIntervals();
							this.monsterList.splice(index, 1);
						}
					});
				}, 50);

				this.attackListTopTIme = setInterval(() => {
					if (this.attackList.length === 0) return;
					
					this.attackList.forEach((item, index) => {
						item.top -= 10;
						
						if (item.top <= 0) {
							this.attackList.splice(index, 1);
						}
					});
				}, 50);
			},

			adjustDifficulty() {
				if (this.grade >= 500 && this.grade < 1000) {
					this.addSpeed = 2000;
				} else if (this.grade >= 1000 && this.grade < 1500) {
					this.addSpeed = 1500;
				} else if (this.grade >= 1500) {
					this.addSpeed = 1000;
				}
				
				if (this.addMonsterListTime) {
					clearInterval(this.addMonsterListTime);
					this.automatic_generation();
				}
			},

			attack(e) {
				if (this.clip <= 0) {
					uni.showToast({
						title: '弹药用完了~',
						icon: "none"
					});
					return;
				}

				this.addDanyao(true);

				const width = this.automaticWidth / 2;
				const height = this.automaticHeight / 2;

				const randomAttack = Math.floor(Math.random() * this.attackObjList.length);
				const attack = this.attackObjList[randomAttack];
				
				const attackParams = {
					top: e.detail.y - height / 2,
					left: e.detail.x - width / 2,
					automaticWidth: width,
					automaticHeight: height,
					...attack,
					// 添加创建时间用于动画控制
					createTime: Date.now()
				};

				this.attackList.push(attackParams);
				this.clip--;
				this.checkCollisions();
			},

			checkCollisions() {
				if (this.attackList.length === 0 || this.monsterList.length === 0) return;
				
				this.attackList.forEach((attack, attackIndex) => {
					this.monsterList.forEach((monster, monsterIndex) => {
						// 更精确的碰撞检测
						const collision = 
							attack.top < (monster.top + monster.automaticHeight) &&
							(attack.top + attack.automaticHeight) > monster.top &&
							attack.left < (monster.left + monster.automaticWidth) &&
							(attack.left + attack.automaticWidth) > monster.left;
					  
						if (collision) {
							monster.bloodVolume -= attack.aggressivity;
							uni.vibrateShort();
							
							// 确保特效显示
							monster.flag = true;
							monster.flagTime = attack.flagTime * 2; // 延长特效显示时间
							monster.texiaoIMage = attack.texiaoIMage;
							
							if (attack.movement_speed <= 0) {
								monster.movement_speed += attack.movement_speed;
							} else {
								monster.movement_speed = Math.max(0, monster.movement_speed - attack.movement_speed);
							}
							
							attack.penetrate--;
							if (attack.penetrate <= 0) {
								this.attackList.splice(attackIndex, 1);
							}
							
							if (monster.bloodVolume <= 0) {
								this.grade += monster.grade;
								this.monsterList.splice(monsterIndex, 1);
								
								if (monster.isBoss) {
									this.isShowBoss = false;
								}
							}
						}
					});
				});
			},

			examine_negative_result() {
				this.take_a_beating_time = setInterval(() => {
					this.monsterList.forEach(monster => {
						if (monster.flag) {
							monster.flagTime -= 0.5;
							if (monster.flagTime <= 0) {
								const original = this.monSterListImage.find(m => m.id === monster.id);
								if (original) {
									monster.flag = false;
									monster.movement_speed = original.movement_speed;
								}
							}
						}
					});
				}, 500);
			},

			addDanyao(isStop) {
				if (isStop) {
					if (this.addDanyaoTime) {
						clearInterval(this.addDanyaoTime);
						this.addDanyaoTime = null;
						this.yeasAddDanyao = false;
					}
					return;
				}
				
				if (this.yeasAddDanyao || this.clip >= this.maxClip) return;
				
				this.yeasAddDanyao = true;
				this.addDanyaoTime = setInterval(() => {
					this.clip++;
					if (this.clip >= this.maxClip) {
						this.addDanyao(true);
					}
				}, 50);
			},

			anew() {
				this.clearAllIntervals();
				this.monsterList = [];
				this.attackList = [];
				this.grade = 0;
				this.clip = this.maxClip;
				this.game_over = false;
				this.isShowBoss = false;
				this.addSpeed = 3000;
				
				this.automatic_generation();
				this.examine_negative_result();
			},

			goBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style scoped>
	.game-container {
		width: 100%;
		height: 100vh;
		background-image: url('https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/cloudstorage/7c7786274b90f9eaf2ecbcf32cb1dfb9.jpg');
		background-size: cover;
		background-position: center;
		position: relative;
		overflow: hidden;
	}

	.game-header {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
	}

	.score-display, .ammo-display {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.label {
		font-size: 28rpx;
	}

	.value {
		font-size: 32rpx;
		font-weight: bold;
	}

	.reload-btn {
		background-color: #4CAF50;
		color: white;
		border: none;
		border-radius: 8rpx;
		padding: 8rpx 16rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		gap: 8rpx;
		cursor: pointer;
	}

	.reload-btn:disabled {
		background-color: #cccccc;
		cursor: not-allowed;
	}

	.game-area {
		width: 100%;
		height: calc(100% - 220rpx);
		position: relative;
	}

	.monster-container {
		width: 100%;
		height: 100%;
		position: relative;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.monster {
		position: absolute;
		transition: top 0.05s linear;
		/* 确保怪物容器可以正确显示子元素 */
		overflow: visible;
	}

	.boss-monster {
		filter: drop-shadow(0 10rpx 15rpx rgba(255, 0, 0, 0.5));
	}

	.monster-image {
		width: 100%;
		height: auto;
		z-index: 1;
		position: relative;
	}

	/* 血条样式 */
	.health-bar {
		width: 80%;
		height: 10rpx;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 5rpx;
		position: absolute;
		top: -15rpx;
		left: 10%;
		z-index: 2;
	}

	.health-value {
		height: 100%;
		background-color: #4CAF50;
		border-radius: 5rpx;
		transition: width 0.2s ease;
	}

	.health-value.critical {
		background-color: #ff4444;
	}

	/* 击中特效容器 - 关键修改 */
	.hit-effect-container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 120%;
		height: 120%;
		z-index: 3;
		pointer-events: none; /* 不影响点击 */
	}

	/* 击中特效图片 - 关键修改 */
	.hit-animation {
		width: 100%;
		height: 100%;
		object-fit: contain;
		animation: hitEffect 0.6s ease-out forwards;
		opacity: 0;
	}

	/* 优化击中动画 */
	@keyframes hitEffect {
		0% { 
			transform: scale(0.5);
			opacity: 0;
		}
		50% { 
			transform: scale(1.2);
			opacity: 1;
		}
		100% { 
			transform: scale(1);
			opacity: 0;
		}
	}

	/* 怪物被击中震动效果 */
	.hit-effect {
		animation: hitShake 0.3s;
	}

	@keyframes hitShake {
		0%, 100% { transform: translateX(0); }
		25% { transform: translateX(-8rpx); }
		75% { transform: translateX(8rpx); }
	}

	/* 警戒线样式 */
	.warning-line {
		width: 100%;
		height: 10rpx;
		position: absolute;
	}

	.warning-pulse {
		width: 100%;
		height: 100%;
		background-color: red;
		animation: pulse 1s infinite;
	}

	@keyframes pulse {
		0%, 100% { opacity: 0.5; }
		50% { opacity: 1; }
	}

	/* 攻击效果样式 - 优化显示 */
	.attack-effects {
		position: absolute;
		width: 100%;
		height: 100%;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.attack-effect {
		position: absolute;
		transition: top 0.05s linear;
	}

	.attack-image {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* 不同攻击类型的动画 */
	.blue-attack .attack-image {
		filter: hue-rotate(180deg);
		animation: attackGlow 0.5s infinite alternate;
	}

	.red-attack .attack-image {
		filter: hue-rotate(0deg);
		animation: attackGlow 0.5s infinite alternate;
	}

	.green-attack .attack-image {
		filter: hue-rotate(90deg);
		animation: attackGlow 0.5s infinite alternate;
	}

	@keyframes attackGlow {
		from { filter: brightness(1); }
		to { filter: brightness(1.5); }
	}

	/* 游戏控制区 */
	.game-controls {
		display: flex;
		justify-content: center;
		gap: 30rpx;
		padding: 20rpx;
	}

	.control-button {
		flex: 1;
		max-width: 300rpx;
		height: 80rpx;
		border: none;
		border-radius: 10rpx;
		color: white;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		cursor: pointer;
	}

	.fire-button {
		background-color: #f44336;
	}

	.reload-button {
		background-color: #2196F3;
	}

	.control-button:disabled {
		background-color: #cccccc;
		cursor: not-allowed;
	}

	/* 游戏结束弹窗 */
	.game-over-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}

	.modal-content {
		background-color: white;
		border-radius: 20rpx;
		padding: 60rpx;
		width: 80%;
		max-width: 500rpx;
		text-align: center;
	}

	.modal-title {
		font-size: 48rpx;
		color: #333;
		margin-bottom: 30rpx;
	}

	.final-score {
		font-size: 36rpx;
		color: #666;
		margin-bottom: 40rpx;
	}

	.final-score span {
		color: #f44336;
		font-weight: bold;
	}

	.modal-buttons {
		display: flex;
		gap: 20rpx;
		justify-content: center;
	}

	.modal-button {
		padding: 15rpx 30rpx;
		border: none;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: white;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.restart-button {
		background-color: #4CAF50;
	}

	.exit-button {
		background-color: #f44336;
	}
</style>
